<template>
  <div class="components-container">
    <div class="header-form">
      <el-form ref="form" :model="searchData" label-width="100px">
        <el-form-item class="header-input" label="行政区名称">
          <el-input v-model="searchData.SARNAME" placeholder="请输入行政区名称"></el-input>
        </el-form-item>
        <el-form-item class="header-input" label="行政区选择">

            <el-cascader  style="width:305px"  class="dz"  ref="address"  v-model="arr" :options="addressOptions" change-on-select>
            </el-cascader>    
        </el-form-item>
        <el-form-item class="header-input" style="width:300px;" label=" " label-width="10px">
          <el-button type="primary" @click="getData" :loading="this.$store.state.isloading">搜索</el-button>
          <el-button @click="btnRepeat">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div>
      <ul class="toolList">
        <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon"
          @click="operate(item.BTNVALUE)">
          <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
        </li>
      </ul>
    </div>
    <dataTable :headList="headList" :dataList="dataList" :pageOrder="pageOrder" @pageChange="pageChange"
      @selectRow="selectRow"></dataTable>
    <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth">
      <h3>{{title}}</h3>
      <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
        <fieldset class="layui-elem-field layui-field-title">
          <legend style="font-weight: bold;">电话</legend>
          <el-form ref="form" :model="jpmData" label-width="100px">
              <el-form-item class="input" label="行政区名称">
              <el-input v-model="jpmData.SARNAME" disabled></el-input>
            </el-form-item>
            <el-form-item class="input" label="代办电话">
              <el-input :disabled="isDetail?true:this.order == '修改'||this.order == '代办电话修改'?false:true" v-model="jpmData.SARTELEPHONENUM" placeholder="请输入代办电话"></el-input>
            </el-form-item>
              <el-form-item class="input" label="公安电话">
              <el-input :disabled="isDetail?true:this.order == '修改'||this.order == '公安电话修改'?false:true" v-model="jpmData.SARPOLICEPHONR" placeholder="请输入公安电话"></el-input>
            </el-form-item>
            <el-form-item class="input" label="卫健电话">
              <el-input :disabled="isDetail?true:this.order == '修改'||this.order == '卫健电话修改'?false:true" v-model="jpmData.SARHEALTHCOMPHONE" placeholder="请输入卫健电话"></el-input>
            </el-form-item>
          </el-form>
        </fieldset>
      </div>
      <div class="layui-form-item btnCenter" v-if="!isDetail">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit" :loading="this.$store.state.isloading">保存</el-button>
      </div>
    </sweet-modal>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/common.scss";

  .input {
    width: 300px;
    display: inline-block;
  }
  .header-input{
      display: inline-block;
  }
  .header-input input{
      width: 200px;
  }

</style>
<script>
  import dataTable from "@/components/Table/DataTable";
  import sweetModal from "@/components/sweetModal";
  import apiBase from "@/api/apiBase.js";
  import {
    formatDate,
    timeStringToDate
  } from "@/utils/date.js";
  import {
    manage
  } from "@/mixins/managePage.js";
  export default {
    name: "jointAppointment",
    mixins: [manage],
    data() {
      return {
        searchData: {
          SARNAME:null
        },
        dataList: [],
        headList: [],
        pageWidth: 700,
        maxHeight: '',
        jpmData: {},
        order: null,
        isDetail: false,
        arr: [],
        addressOptions: [], 
      };
    },
    methods: {
      //获取火化登记数据
      getData() {
        let searchData = JSON.parse(JSON.stringify(this.searchData));
        searchData.SARIDOr = this.arr[this.arr.length - 1];
        let data = {
          PageIndex: this.pageOrder.currentPage,
          PageSize: this.pageOrder.pageSize,
          OrderBy: this.pageOrder.orderType,
          OrderByType: this.pageOrder.orderSort,
          Data: searchData
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().SarConfig.SarConfigQuery,
          res => {
            this.dataList = res.data.content.OutData;
            this.pageOrder.totalNum = res.data.content.RecordCount;
          }
        );
      },
      //获取表头
      getColumns() {
        let data = {};
        apiBase.DoService(
          data,
          apiBase.getApiAdress().Column.GetTelephoneConfigColumns,
          res => {
            this.headList = res.data.content;
          }
        )
      },
      btnShow(btn) {
        switch (btn) {
          case "修改":
          case "代办电话修改":
          case "公安电话修改":
          case "卫健电话修改":
            if (this.currentRow) {
              return true
            } else {
              return false
            }
            break;
          default:
        }
      },
      //功能操作
      operate(order) {
          this.isDetail = false
        this.dataRepeat()
        this.order = order
        switch (this.order) {
          case "代办电话修改":
            this.detail(this.currentRow.SARID)
            this.$refs.dialog.open()
            break;
          case "公安电话修改":
            this.detail(this.currentRow.SARID)
            this.$refs.dialog.open()
            break;
          case "卫健电话修改":
            this.detail(this.currentRow.SARID)
            this.$refs.dialog.open()
            break;
          case "修改":
            this.detail(this.currentRow.SARID)
            this.$refs.dialog.open()
            break;
          case "详情":
            this.isDetail = true
            this.detail(this.currentRow.SARID)
            this.$refs.dialog.open()
            break;
          default:
        }
      },
      submit() {
        switch (this.order) {
          case "代办电话修改":
          case "公安电话修改":
          case "卫健电话修改":
          case "修改":
            this.modify(this.currentRow.SARID)
            break;
          default:
        }
      },
      detail(id) {
        apiBase.DoService({
            SARID: id
          },
          apiBase.getApiAdress().SarConfig.SarConfigDetail,
          res => {
            this.jpmData = res.data.content
          }
        )
      },
      modify(id) {
        let data = JSON.parse(JSON.stringify(this.jpmData))
        data.SARID = id
        apiBase.DoService(
          data,
          apiBase.getApiAdress().SarConfig.SarConfigModify,
          res => {
            this.$message({
              type: "success",
              message: "修改成功!",
            })
            this.$refs.dialog.close()
            this.getData()
          }
        )
      },

      //查询条件重置
      btnRepeat() {
          this.searchData= {
          SARNAME:null
        }
        this.arr=[];
        this.getData();
      },
      //数据重置
      dataRepeat() {
        this.jpmData = {}
      },
      //获取地址
      restructur(value) {
        let arr = JSON.parse(JSON.stringify(value));
        var data = [];
        arr.forEach(item => {
          if (item.Children.length > 0) {
            data.push({
              label: item.SARNAME,
              value: item.SARID,
              level: item.SARLEVEL,
              children: this.restructur(item.Children)
            });
          } else {
            data.push({
              label: item.SARNAME,
              value: item.SARID,
              level: item.SARLEVEL
            });
          }
        });
        return data;
      },
    },
    mounted() {

    },
    components: {
      dataTable,
      sweetModal
    },
    activated() {
      this.getData();
      // 获取级联选择
      apiBase.DoService({}, apiBase.getApiAdress().Code.GetBoroughByCode, res => {
        let data = res.data.content;
        this.addressOptions = data.map(item => ({
          label: item.SARNAME,
          value: item.SARID,
          level: item.SARLEVEL,
          children: item.Children.map(item => ({
            label: item.SARNAME,
            value: item.SARID,
            level: item.SARLEVEL,
            children: this.restructur(item.Children)
          }))
        }));
      });
    },
    created() {
      this.getColumns();
    },
    watch: {

    }
  };

</script>
